<template>
	<div class="fourth">
		<div :style=scale.title class="title">
			<div class="a">
				千所高校，认识大学
			</div>
			<div class="b">
				全国2000多所院校，海量数据任你查询
			</div>
		</div>
		<div :style=scale.base class="container">
			<div class="container-box">
				<img class="box" src="./images/box.png" alt="" />
				<div class="a">
					<img src="./images/a.png" alt="" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import scale from "@/modules/scale"
	export default{
		name:'fourth',
		methods:{

		},
		computed:{
			scale:scale.scale
		}
	}
</script>

<style lang="less" scoped>
	.fourth.active{
		.container{
			div.a{
				right:0px;
				left:0px;
				margin:auto;
				img{
					width:100%;
				}
			}
			img.box{
				left:0px;
				right:0px;
				margin:auto;
			}
		}
	}
	.fourth{
		background:#fff;
		height:100%;
		.title{
			.a{
				font-size:26px;
				font-weight:600;
			}
			.b{
				margin-top:12px;
				font-size:18px;
			}
		}
		.container{
			.container-box{
				position:absolute;
				top:0;
				right:0;
				bottom:0;
				left:0;
				margin:auto;
				.box{
					transition:.5s all;
					transition-delay: .5s;
					position:absolute;
					left:0;
					right:0;
					top:0;
					bottom:0;
					margin:auto;
					width:190px;
					transform:translateX(-50px);
				}
				.a{
					right:0;
					left:0;
					bottom:0;
					top:0;
					margin:auto;
					transform:translateX(50px);
					width:150px;
					height:270px;
					z-index: 2;
					overflow:hidden;
					img{
						width:100%;
					}
				}
			}
		}
	}
</style>